<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="../../prefs/prefs.html">
<link rel="import" href="../prefs_behavior.html">
<link rel="import" href="types.html">

<dom-module id="nearby-share-data-usage-dialog">
  <template>
    <style>
      :host {
        --cr-dialog-width: 340px;
      }

      h1 {
        color: var(--cr-primary-text-color);
        font-family: 'Google Sans';
        font-size: 16px;
        font-weight: normal;
        line-height: 24px;
        margin: 0;
        padding-block-end: 0;
        padding-block-start: 24px;
      }

      cr-radio-group {
        margin-block-end: 12px;
        margin-inline-start: 2px;
      }

      .data-usage-name {
        font-weight: 600;
        padding-block-start: 20px;
      }

      #dataUsageDataIcon {
        --iron-icon-fill-color: var(--cros-icon-color-secondary);
        height: 16px;
        padding-bottom: 2px;
        width: 16px;
      }

      #dataUsageDataTooltip {
        --paper-tooltip-background: var(--cros-tooltip-background-color);
        --paper-tooltip-opacity: 1;
        --paper-tooltip-text-color: var(--cros-tooltip-label-color);
        --paper-tooltip: {
          margin-inline-end: 6px;
        };
      }

      #dataUsageDataTooltipText {
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
      }
    </style>
    <cr-dialog id="dialog">
      <h1 slot="title">
        $i18n{nearbyShareDataUsageDialogTitle}
      </h1>
      <div slot="body">
        <cr-radio-group selected="[[selectedDataUsage_(
            prefs.nearby_sharing.data_usage.value)]]">
          <cr-radio-button id="dataUsageDataButton"
              name="[[NearbyShareDataUsage.ONLINE]]"
              aria-labelledby="dataUsageDataLabel"
              aria-describedby="dataUsageDataDescription
                  dataUsageDataTooltipText">
            <div id="dataUsageDataLabel" class="data-usage-name"
                aria-hidden="true">
              $i18n{nearbyShareDataUsageDataLabel}
              <iron-icon id="dataUsageDataIcon"
                  icon="cr:info-outline"
                  aria-hidden="true">
              </iron-icon>
              <paper-tooltip id="dataUsageDataTooltip"
                  for="dataUsageDataIcon"
                  offset="8"
                  position="right"
                  fit-to-visible-bounds>
                <span id="dataUsageDataTooltipText">
                  $i18n{nearbyShareDataUsageDataTooltip}
                </span>
              </paper-tooltip>
            </div>
            <div id="dataUsageDataDescription" aria-hidden="true">
              $i18n{nearbyShareDataUsageDataDescription}
            </div>
          </cr-radio-button>
          <cr-radio-button id="dataUsageWifiOnlyButton"
              name="[[NearbyShareDataUsage.WIFI_ONLY]]"
              aria-labelledby="dataUsageWifiOnlyLabel"
              aria-describedby="dataUsageWifiOnlyDescription">
            <div id="dataUsageWifiOnlyLabel" class="data-usage-name"
                aria-hidden="true">
              $i18n{nearbyShareDataUsageWifiOnlyLabel}
            </div>
            <div id="dataUsageWifiOnlyDescription" aria-hidden="true">
              $i18n{nearbyShareDataUsageWifiOnlyDescription}
            </div>
          </cr-radio-button>
          <cr-radio-button id="dataUsageOfflineButton"
              name="[[NearbyShareDataUsage.OFFLINE]]"
              aria-labelledby="dataUsageOfflineLabel"
              aria-describedby="dataUsageOfflineDescription">
            <div id="dataUsageOfflineLabel" class="data-usage-name"
                aria-hidden="true">
              $i18n{nearbyShareDataUsageOfflineLabel}
            </div>
            <div id="dataUsageOfflineDescription" aria-hidden="true">
              $i18n{nearbyShareDataUsageOfflineDescription}
            </div>
          </cr-radio-button>
        </cr-radio-group>
      </div>
      <div class="layout horizontal center" slot="button-container">
        <cr-button class="cancel-button" on-click="onCancelClick_">
          $i18n{cancel}
        </cr-button>
        <cr-button class="action-button" on-click="onSaveClick_">
          $i18n{nearbyShareUpdateDataUsage}
        </cr-button>
    </cr-dialog>
  </template>
  <script src="nearby_share_data_usage_dialog.js"></script>
</dom-module>
